<template>
  <div class="chart-content">
    <v-chart class="chart" :option="option" autoresize />
    <div class="chart-footer">
      <div class="chart-footer-item">
        <div class="n"><span>200</span><strong>方</strong></div>
        <span>计价周期已耗用</span>
      </div>
    </div>
  </div>
  <div class="chart-cont-footer">还是差499.8方到达第二阶梯</div>
</template>

<script setup>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { ref, provide } from "vue";

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);

const option = ref({
  tooltip: null,
  legend: null,
  series: [
    {
      type: "pie",
      radius: ["60%", "65%"],
      center: ["50%", "75%"],
      startAngle: 220,
      endAngle: (360 - 220) * 0.4,
      labelLine: {
        show: true,
        length: 0,
        lineStyle: {
          color: "#fff",
        },
      },
      emphasis: {
        disabled: true,
      },
      itemStyle: {
        borderRadius: [80, 0, 80, 0],
        color: "red",
      },
      data: [{ value: 2000, name: "2000" }],
    },
    {
      type: "pie",
      radius: ["60%", "65%"],
      center: ["50%", "75%"],
      startAngle: (360 - 220) * 0.4,
      endAngle: 320,
      labelLine: {
        show: true,
        length: 0,
        lineStyle: {
          color: "#fff",
        },
      },
      emphasis: {
        disabled: true,
      },
      itemStyle: {
        color: "green",
        borderRadius: [0, 80, 0, 80],
      },
      data: [{ value: 400, name: "400" }],
    },
  ],
});
</script>

<style scoped lang="scss">
.chart-content {
  height: 375px;
  width: 375px;
  position: relative;
  .chart {
    height: 100%;
  }
  .chart-footer {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 190px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    .chart-footer-item {
      height: 100px;
      display: flex;
      flex-direction: column;
      font-size: 16px;
      padding:20px;
      border: 1px solid #eaeaea;
      border-radius: 500px;
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        font-size: 12px;
      }
      .n {
        span {
          font-size: 30px;
          font-weight: bold;
        }
        margin-bottom: 10px;
        strong {
          font-size: 16px;
        }
      }
    }
  }
}
.chart-cont-footer {
  width: 375px;
  text-align: center;
  font-size: 14px;
  color: #999;
  margin-top: 10px;
}
</style>
